<template>
	<div class="content">
		<add-tip :tip="tip" :duration="duration" />
		<div class="titles">
			<img class="logos" src="https://pic.imgdb.cn/item/666bb706d9c307b7e92a2e2f.png" />
			&nbsp;
			<span>图集去水印</span>
		</div>
		<div class="heading">
			<image src="https://pic.imgdb.cn/item/666bb706d9c307b7e92a2e5f.png" alt="" style="max-height:200px ;" mode="widthFix" />
		</div>
		<div class="input">
			<input placeholder="请输入链接" class="inputcss" v-model="value" />
			<button @click="outwatermark" class="btnclass" type="default">粘贴并提取</button>
		</div>
		<div class="download" v-if="downdata.title">
			<div class="downall" @click="downall(downdata.pics)">一键保存所有图片到相册</div>
			<div class="imgitem" v-for="(item, index) in downdata.pics" :key="index">
				<image :src="item" mode="widthFix" alt="" />
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				value:'',
				downdata:{},
			}
		},
		onLoad() {

		},
		methods: {
		outwatermark(){
			console.log('点击了解析', this.value);
			if(!this.value){
		      uni.showToast({
				title: '请先粘贴链接！',
				icon: 'none',
				duration: 1500
			  })  
			} else {
				const urlRegex = /https?:\/\/[^\s\/$.?#].[^\s]*/g; 
				const urls = this.value.match(urlRegex);  
				uni.showLoading({
					title:'解析中，请稍等~'
				})
				console.log('urls',urls);
				if (urls && urls.length >0) {
					uni.request({
					  url: 'https://videoapi.funjs.top/api/parseUrl/query',
					  method: 'GET',
					  header: {
						'Content-Type': 'application/json'
					  },
					  data: {url: urls[0], userIp:'', platform:'web'},
					  success: (res)=> {
						this.downdata = res.data.data
						console.log(this.downdata)
						uni.hideLoading()
						uni.showToast({
							title: '解析成功！',
							icon: 'none',
							duration: 1500
						})  
						return res.data.data
					  },
					  fail: (err)=> {
						console.log('请求失败', err);	
						uni.showToast({
						  title: '接口请求失败！',
						  icon: 'none',
						  duration: 1500
						}) 
						return err
					  }
					});
				} else {
				  uni.showToast({
					title: '请粘贴完整链接！',
					icon: 'none',
					duration: 1500
				  })  
				}
			}
		},
		async downall () {
			console.log('一键去水印', this.downdata.pics);
			await uni.showLoading({
				title:'下载中'
			})
			this.downdata.pics.forEach(item => {
				uni.downloadFile({
					url: item,
					success: (res) => {
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function(res) {
									uni.showToast({
										title: '保存成功',
										icon: 'none'
									});
									uni.hideLoading()
								},
							})
						}
					},
					fail: (err) => {
						uni.showToast({
							title: '保存失败',
							icon: 'none'
						});
						uni.hideLoading()
					}
				})
			})
		}
	},
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.heading{
		width: 100%;
		max-height: 200px;
		& image{
			width: 100%;
		}
	}
	.titles{
		margin: 0 auto;
		font-size: 24px;
		color: #000;
		padding: 20px;
		display: flex;
		text-align: center;
		.logos{
			width: 35px;
			height: 32px;
			object-fit: cover;
		}
	}
	.input{
		height: 50px;
		min-width: 350px;
		border-radius: 8px;
		margin-top: 20px;
		padding-left: 3px;
		border: 2px solid #8f8f94;
		display: flex;
		flex-wrap: nowrap;
		.inputcss{
			width: 65%;
		}
		.btnclass{
			background-color: #f5f5ff;
			margin-left: 2px;
		}
	}
	.download{
		width: 90%;
		margin: 0 auto;
		border-radius: 10px;
		border: 3px solid #f5f5ff;
		padding: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		.downall{
			text-align: center;
			padding: 10px 0;
			border: 1px solid #f5f5ff;
		}
	}
</style>
